import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import {getQueryString} from '../utils/util';
import { Button, List,ActivityIndicator } from 'antd-mobile';
import { Link } from 'react-router-dom';
import Xc from '../components/xc';

import 'antd-mobile/lib/button/style/index.css';
import 'antd-mobile/lib/list/style/index.css';
import 'antd-mobile/lib/activity-indicator/style/index.css';
import '../static/styles/center.css';

import Footer from '../components/footer';
import { get, post } from '../api/getData';

const Item = List.Item;

class Center extends Component {
    constructor(props) {
        super(props);
        this.state = {
            user:[],
            activity:[],
            animating:false
        }
    }

    componentDidMount() {
        document.title = '个人中心';
        let __this = this;
        __this.setState({
            animating:true
        });
        get('/api/activity/user', {}, function(error, data){
            __this.setState({
                animating:false
            });
            if(error === null){
                __this.setState({
                    user:data.data.user,
                    activity: data.data.activity
                });
            }
        });
    }

    render() {
        return (<div className='pb120'>
            {
                this.state.animating
                ?
                <ActivityIndicator
                    toast
                    text="Loading..."
                />
                :
                ''
            }
            <div className='center-top'>
                <div className='center-top-user'>
                    <div className='center-top-user-headimg'><img src={this.state.user.headimgurl}/></div>
                    <div className='center-top-user-name'>{this.state.user.nick_name}</div>
                    <div className='center-top-user-id'>ID:{this.state.user.id}</div>
                </div>
                <div className='center-top-jf'>积分: {this.state.user.integral}</div>
            </div>
            {
                this.state.activity?
                <Link to='/center/order'>
                    <Xc data={this.state.activity}/>
                </Link>
                :
                null
            }

            <List>
                <Item
                  thumb="http://imgs.guoxiaoge.cn/youji-huiyuan@2x.png"
                  arrow="horizontal"
                  onClick={() => {
                      window.location.href = '/lxr/list';
                  }}
                >会员信息</Item>
                <Item
                  thumb="http://imgs.guoxiaoge.cn/youji-youhui@2x.png"
                  onClick={() => {

                  }}
                  arrow="horizontal"
                >
                  入会享优惠
                </Item>
                <Item
                  thumb="http://imgs.guoxiaoge.cn/youji-jieshao@2x.png"
                  onClick={() => {
                       window.location.href = '/center/introduce';
                  }}
                  arrow="horizontal"
                >
                  乐酷介绍
                </Item>
                <Item
                  thumb="http://imgs.guoxiaoge.cn/youji-zhaoping@2x.png"
                  onClick={() => {
                      window.location.href = '/zhaopin';
                  }}
                  arrow="horizontal"
                >
                  领队招聘
                </Item>
              </List>
              <Footer  active='center-active'/>
        </div>);
    }
}

export default Center;
